import React, { PureComponent } from "react"
import moment from 'moment';

import Styles from '@/scss/froms.scss'
import IconStyles from "@/font_icon/iconfont.css"
//引入自己的时间工具类
import dateUtils from '@/utils/dateutils'
//引入ui框架,时间日历
import { DatePicker, Space } from 'antd';
const { RangePicker } = DatePicker;

//表单中的时间与输入框输入组件
class FromInput extends PureComponent<Iprops, any>{

  render() {
    return (
      <div className={Styles.from_inputs}>
        <textarea className={Styles.from_input} rows={5} value={this.props.content} onChange={(e) => { this.props.onChangeValue(e) }}></textarea>
        {/* 时间输入 */}
        <div className={Styles.from_time}>
          <i className={`${IconStyles.iconfont} ${IconStyles.icon_shijian}`}></i>
          <span>设置时间: </span>
          <Space direction="vertical" size={12}>
            <RangePicker
              ranges={{//设置至本周末,月末,本日的快捷设置按键
                "今日任务": [moment(), moment().endOf('day')],
                '本周任务': [moment(), moment().endOf('isoWeek')],
                '本月任务': [moment(), moment().endOf('month')],
              }}
              showTime //显示小时选择
              format="YYYY/MM/DD HH:mm" //日期框选择时显示样式
              onChange={(value) => this.props.onOkTime(value)}
              size={"large"}
              className={Styles.time}
              bordered={true}
              //默认显示    此处如果是创建表单,传入的时间将会是空的,所以赋值上默认提示数据,达到修改与创建表单的显示区分效果
              placeholder={[dateUtils.getLocalTime(this.props.start || "请输入开始时间"), dateUtils.getLocalTime(this.props.deadline || "请输入到期时间")]}
            />
          </Space>
        </div>
      </div>
    )
  }
}
//传入的两个函数与conent
type Iprops = {
  content: string,
  start: string,
  deadline: string,
  onOkTime: (value: any) => void,
  onChangeValue: (value: any) => void,
}

export default FromInput




